<template>
  <div>
    <span>商品清单如下</span>

    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.shopName + item.price }}/份
      </li>
    </ul>

    <span>请选择购买数量</span>
    <Food v-for="(item, index) in list" :key="index" :obj="item"></Food>

    总价为：{{ allNum }}
  </div>
</template>

<script>
import Food from "./components/11月12日练习6组件.vue";

export default {
  components: {
    Food,
  },

  data() {
    return {
      list: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  computed: {
    allNum() {
      return this.list.reduce(
        (sum, item) => (sum += item.count * item.price),
        0
      );
    },
  },
};
</script>

<style>
</style>